#battle_page{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  background: #ededed;
  pointer-events: all;
  display: flex;
  flex-direction: column;

  header .round{
    width: 100px;
    text-align: right;
  }

  .content{
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow-y: scroll;
    // height: calc(100% - 35px);
    flex: 1;
    overflow-x: hidden;
    pointer-events: all;
    transition: transform height .6s;
    @include S(grid-gap, 60px);

    #battle-svg{
      position: absolute;
      top: 0;
      width: 100%;
      height: 5000px;

      path{
        stroke-dasharray: 5;
        stroke-width: 3px;
        fill: transparent;
        stroke: #ff101071;
      }
    }

    @include onPc{
      @include S(grid-gap, 200px);
    }

    .unit{
      @include Text;
      background: white;
      border: 1px solid #dedede;
      @include S(padding, 5px, 10px);
      @include S(margin, 20px, 10px);
      position: relative;
      pointer-events: all;
      transition: transform .2s;

      &.move{
        transform: translateX(15px);
      }

      .alert-msg{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;

        .text{
          @include Text;
          position: absolute;
          white-space: nowrap;
          z-index: 10;
          font-weight: bold;
          font-family: 'GameFont2';
          
          @include InlineAnimation(.2s){
            0%{transform: scale(3) translateX(-70%); opacity: 0;}
            100%{transform: scale(1) translateX(-70%); opacity: 1;}
          }
          animation-fill-mode: forwards !important;
          display: flex;
          align-items: center;

          img{
            width: 20px;
            height: 20px;
          }
          
          &.remove-anim{
            @include InlineAnimation(.4s){
              0%{transform: translateY(0px) translateX(-70%); opacity: 1;}
              100%{transform: translateY(-30px) translateX(-70%); opacity: 0;}
            }
          }
        }

        .msg{
          position: absolute;
          width: 80%;
          max-width: 200px;
          right: 0;
          transform: translateX(20px) translateY(-20px);
          z-index: 9;
  
          &.remove-anim > .wrapper{
            @include InlineAnimation(.3s){
              0%{transform: scale(1); opacity: 0;}
              100%{transform: scale(0); opacity: 1;}
            }
          }

          .wrapper{
            background: white;
            border-radius: 16px;
            box-shadow: 0 2px 8px 0 rgba(3, 14, 44, .14);
            background-clip: padding-box;
            @include S(padding, 5px, 8px);
            @include PlainText;
  
            transform-origin: bottom;
            @include InlineAnimation(.3s){
              0%{transform: scale(0); opacity: 0;}
              100%{transform: scale(1); opacity: 1;}
            }
  
            > div{
              position: relative;
              z-index: 10;
            }
  
            &::before{
              content: '';
              display: block;
              position: absolute;
              @include S(width, 8px);
              @include S(height, 8px);
              background: transparent;
              border-width: 4px;
              border-style: solid;
              border-color: #fff transparent transparent #fff;
              left: 50%;
              transform: translateX(-50%) rotate(-135deg);
              bottom: 0px;
              z-index: 9;
            }
          }
        }
      }

      &.enemy{
        &.move{
          transform: translateX(-15px);
        }

        .action{
          right: unset;
          left: -10px;
        }
        .selectTip{
          right: unset;
          // left: -30px;
          @include S(left, -30px);
        }
        .msg{
          right: unset;
          left: 0;
          transform: translateX(-20px) translateY(-20px);
        }
      }

      .status_desc{
        @include S(margin-top, 5px);

        h5{
          font-weight: 100;
          font-size: 10px;
          line-height: 10px;
          // text-align: right;
        }
      }

      .info{
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      &.active{
        .action i{
          background: $colorBlueBright;
        }
      }

      .action{
        width: 3px;
        position: absolute;
        height: 80%;
        background: #dddddd;
        right: -10px;
        top: 20%;
        // border-radius: 10px;
        overflow: hidden;
        transform: rotate(180deg);

        i{
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          width: 3px;
          height: 100%;
          background: #888;
        }
      }

      .selectTip{
        @include PlainText;
        position: absolute;
        right: -30px;
        writing-mode: vertical-lr;
        height: 100%;
        top: 0;
        color: $colorRedBright;
      }

      $progHeight: 5px;

      .prog{
        height: $progHeight;
        position: relative;
        background: #ededed;
        border-radius: 20px;
        overflow: hidden;
        @include S(margin, 5px, 0);

        &.hp{
          i{
            background: $colorRedBright;
          }
        }

        &.mana{
          i{
            background: $colorBlueBright;
          }
        }

        i{
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: $progHeight;
        }
      }
    }
  }

  &.player-control{
    .content{
      // height: calc(60% - 35px);
    }

    .controls{
      transform: translateY(0%);
      height: 40%;

      *{
        pointer-events: all;
      }
    }
  }

  .controls{
    // position: absolute;
    // bottom: 0;
    width: 100%;
    height: 0%;
    transform: translateY(100%);
    transition: .3s;
    background: white;
    border-top: 1px solid #dedede;
    display: flex;

    .select-btns{
      background: #7d808a;

      .item{
        @include PlainText;
        @include S(padding, 10px, 5px);
        color: #555;
        writing-mode: vertical-lr;
        color: white;

        &.active{
          background: white;
          color: #555;
        }
      }
    }

    .pages{
      flex: 1;
      @include S(padding, 10px);
    }
  }

  &.player-cancel{
    .content{
      // height: calc(100% - 35px - 50px);
    }

    .select-skill{
      height: unset;
      @include S(padding, 15px, 0);
      @include AnimScaleShow();
    }
  }

  .select-skill{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    height: 0;
    @include AnimScaleHide();
    animation-fill-mode: forwards;

    > div{
      @include Text;
      margin: 0 10px;
      border: unset;
      @include S(padding, 10px, 15px);
    }
  }

  // .cancel-skill{
  //   position: absolute;
  //   width: 100%;
  //   color: rgb(243, 243, 243);
  //   background: #ef5072;
  //   bottom: 0;
  //   left: 0;
  //   text-align: center;
  //   @include Text;
  //   height: 50px;
  //   line-height: 50px;
  //   // box-shadow: 0 0 10px #f07c95;
  //   transform: translateY(100%);
  //   transition: transform .3s;
  // }

  .skill-page .item{
    border: 1px solid #dedede;
    border-radius: 5px;
    color: #888;
    @include DropShadow;
    @include S(padding, 5px, 10px);
    @include S(margin-bottom, 10px);

    .tag-text{
      @include S(margin-top, 5px); 
    }

    .tag img{
      @include S(width, 15px);
    }
  }

  > .info{
    display: flex;
    justify-content: space-between;
  }

  .site{
    pointer-events: all;
    @include PlainText;
    @include S(width, 5px);
    @include DropShadow;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    color: white;
    @include S(margin-top, 10px);
    @include S(padding, 5px, 10px);
    width: fit-content;
    background: #ef5072;
  }
}